<template>
  <!--
    作者：luoyiming
    时间：2020-06-04
    描述：插件中心-直播-直播房间列表-修改
  -->
    <div title="编辑直播间" >
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
         <el-form-item label="直播间名称" prop="name">
           <el-input v-model="ruleForm.name" ></el-input>
         </el-form-item>

          <el-form-item label="直播封面图" prop="coverImgId">
          <div>
            <el-button type="primary" @click="openUpload('cover')">上传图片</el-button>
            <img :src="coverImgPath" class="mt10" :width="120" v-if= "ruleForm.coverImgId!=''" />
            <div class="gray9">建议尺寸1080*1920,大小不超过2M</div>
            <!--上传图片组件-->
            <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
          </div>
          </el-form-item>

         <el-form-item label="直播时间">
           <el-col :span="11">
             <el-form-item prop="startTime">
              <el-date-picker
                 v-model="ruleForm.startTime"
                 type="datetime"
                 format="YYYY-MM-DD HH:mm:ss"
                 value-format="YYYY-MM-DD HH:mm:ss"
                 placeholder="选择开始时间">
               </el-date-picker>
             </el-form-item>
           </el-col>
           <!-- <el-col class="line" :span="2">-</el-col> -->
           <el-col :span="11">
             <el-form-item prop="endTime">
               <el-date-picker
                  v-model="ruleForm.endTime"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="选择结束时间">
                </el-date-picker>
             </el-form-item>
           </el-col>
         </el-form-item>

       <el-form-item label="主播昵称" prop="anchorName">
         <el-input v-model="ruleForm.anchorName	"></el-input>
       </el-form-item>

       <el-form-item label="主播微信号" prop="anchorWechat">
         <el-input v-model="ruleForm.anchorWechat	"></el-input>
       </el-form-item>

       <el-form-item label="直播分享图" prop="shareImgId">
         <div>
           <el-button type="primary" @click="openUpload('share')">上传图片</el-button>
           <img :src="shareImgPath" class="mt10" :width="120" v-if= "ruleForm.shareImgId!=''" />
           <div class="gray9">建议像素800*640，大小不超过1M</div>
           <!--上传图片组件-->
           <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
         </div>
       </el-form-item>
       <el-form-item label="购物直播频道封面图" prop="feedsImgId">
         <div>
           <el-button type="primary" @click="openUpload('feeds')">上传图片</el-button>
           <img :src="feedsImgPath" class="mt10" :width="120" v-if= "ruleForm.feedsImgId!=''" />
           <div class="gray9">建议像素800*800，大小不超过100KB</div>
           <!--上传图片组件-->
           <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
         </div>
       </el-form-item>
<!--       <el-form-item label="推流类型" prop="type">
         <el-radio-group v-model="ruleForm.type">
           <el-radio :label = "0" >手机直播</el-radio>
           <el-radio :label = "1" >推流</el-radio>
         </el-radio-group>
       </el-form-item> -->
       <el-form-item label="是否开启点赞" prop="closeLike">
         <el-radio-group v-model="ruleForm.closeLike">
           <el-radio :label = "0" >开启</el-radio>
           <el-radio :label = "1" >关闭</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="是否开启直播货架" prop="closeGoods">
         <el-radio-group v-model="ruleForm.closeGoods">
           <el-radio :label = "0" >开启</el-radio>
           <el-radio :label = "1" >关闭</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="是否开启评论" prop="closeComment">
         <el-radio-group v-model="ruleForm.closeComment">
           <el-radio :label = "0" >开启</el-radio>
           <el-radio :label = "1" >关闭</el-radio>
         </el-radio-group>
       </el-form-item>
     </el-form>
    <div>
      <el-button type="primary" @click="submit('ruleForm')" :loading="loading">提交</el-button>
    </div>
  </div>
</template>

<script>
import wxLiveApi from '@/api/wxlive.js';
import Upload from '@/components/file/Upload.vue';

export default {

  components: {
    /*图片上传*/
    Upload: Upload,
  },

  data() {
    return {
      /*是否上传图片*/
      isupload: false,
      isImg: false,
      type: '',

      coverImgPath: '',
      shareImgPath: '',
      feedsImgPath: '',


      auditRemark: '',
      liveId: 0,

      ruleForm: {
        name: '',
        coverImgId: 0,
        startTime: '',
        endTime: '',
        anchorName: '',
        anchorWechat: '',
        shareImgId: '',
        feedsImgId: '',
        type: '',
        closeLike: '',
        closeGoods: '',
        closeComment: '',
        auditStatus: 0,
      },

      rules: {
        name: [
          { required: true, message: '请输入直播间名称', trigger: 'blur' },
          { min: 3, max: 17, message: '长度在 3 到 17 个字符', trigger: 'blur' }
        ],
        anchorName: [
          { required: true, message: '请输入主播昵称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        anchorWechat: [
          { required: true, message: '请输入主播微信号', trigger: 'blur' },
        ],
        coverImgId: [
          { required: true, message: '请选择封面图片', trigger: 'change' },
        ],
        shareImgId: [
          { required: true, message: '请选择分享图片', trigger: 'change' },
        ],
        feedsImgId: [
          { required: true, message: '请选择购物直播频道封面图', trigger: 'change' },
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择推流类型', trigger: 'change' }
        ],
        closeLike: [
          { required: true, message: '请选择是否开启点赞', trigger: 'change' }
        ],
        closeGoods: [
          { required: true, message: '请选择是否开启直播货架', trigger: 'change' }
        ],
        closeComment: [
          { required: true, message: '请选择是否开启评论', trigger: 'change' }
        ],
      },
      /*左边长度*/
      formLabelWidth: '120px',
      loading: false
    };
  },

  created() {
    /*获取列表*/
    this.liveId = this.$route.query.liveId;
    this.getData();
  },

  methods: {
    /**
     * 获取基础数据
     */
    getData: function() {
      let self = this;
      wxLiveApi.toEdit({liveId: self.liveId}).then(res => {
        self.ruleForm = res.data;
        self.coverImgPath = res.data.coverImgPath;
        self.shareImgPath = res.data.shareImgPath;
        self.feedsImgPath = res.data.feedsImgPath;
      }).catch(error => {
        self.loading = false;
      });
    },

    submit(formName) {
      let self = this;
      self.$refs[formName].validate((valid) => {
        if (valid) {
          let param=self.ruleForm;
          param.liveId = self.liveId;
          wxLiveApi.editRoom(param)
          .then(data => {
              ElMessage({
                message: '操作成功',
                type: 'success'
              });
              this.$router.back(-1);
            });
        } else {
          return false;
        }
      })
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

     /*上传*/
     openUpload(e) {
       this.type = e;
       this.isupload = true;
     },
     
     /*上传图片*/
     uploadFile(fileId) {
       let self = this;
       const loading = ElLoading.service({
         lock: true,
         text: '文件上传中,请等待',
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       });
       wxLiveApi.uploadFile({ fileId },err=>{
         loading.close();
       })
         .then(response => {
           loading.close();
           ElMessage({
             message: '上传文件至微信成功',
             type: 'success'
           });
         })
         .catch(response => {
           loading.close();
         });
     },

    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        if (this.type == 'cover') {
          this.coverImgPath = e[0].filePath;
          this.ruleForm.coverImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.coverImgId);
        } else if (this.type == 'share') {
          this.shareImgPath = e[0].filePath;
          this.ruleForm.shareImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.shareImgId);
        } else if (this.type == 'feeds') {
          this.feedsImgPath = e[0].filePath;
          this.ruleForm.feedsImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.coverImgId);
        }
      } else {
      }
      this.isupload = false;
    }
  }
};
</script>

<style>
</style>
